<template>
  <el-card class="z-9999 h-400px w-300px" shadow="never" body-style="height: 80%; padding: 0">
    <el-scrollbar class="p-20px">
      <VueDraggable
        :list="listData"
        :animation="300"
        item-key="prop"
        filter=".forbid"
        :forceFallback="true"
      >
        <template #item="{ element }">
          <div
            class="mb-10px flex items-center justify-between"
            :class="element.fixed ? 'forbid' : ''"
          >
            <el-switch size="small" v-model="element.show" :disabled="element.fixed" />
            <span class="text-14px">{{ element.label }}</span>
            <el-icon class="cursor-pointer" size="14"><Rank /></el-icon>
          </div>
        </template>
      </VueDraggable>
    </el-scrollbar>
    <slot></slot>
  </el-card>
</template>
<script lang="ts" setup>
import { Rank } from '@element-plus/icons-vue'
import VueDraggable from 'vuedraggable'
defineOptions({ name: 'TableHeadSort' })

defineProps({
  listData: {
    type: Array,
    default: () => []
  }
})
</script>
